<template>
  <div>

        <!-- 顶部样式 -->
        <div>
            <tou></tou>
        </div>
        <!-- 顶部样式 -->


<!-- 中间展示区 -->
<div>
<router-view></router-view>

</div>
<!-- 中间展示区 -->
    
    

    <!-- tabbar栏 -->
    <div>
        <van-tabbar v-model="active"  route>
        <van-tabbar-item name="home" icon="home-o" replace to="/shou" >战疫</van-tabbar-item>
        <van-tabbar-item name="search" icon="search" replace to="/quanzi" >圈子</van-tabbar-item>
        <van-tabbar-item name="friends" icon="friends-o" replace to="/xunyi" >寻医</van-tabbar-item>
        <van-tabbar-item name="setting" icon="setting-o" replace to="/xiaoxi" >消息</van-tabbar-item>
        <van-tabbar-item name="my" replace to="/my" icon="setting-o"   >我的</van-tabbar-item>
        </van-tabbar>
    </div>
    <!-- tabbar栏 -->



  </div>
</template>

<script>
import tou from '../../components/head.vue'
import * as api from '../../api/home'
export default {
    components:{
        tou
    },
    created(){
        this.getlun(),
        this.getlou()
    },

    data(){
        return{
            lunlist:[],
            loulist:[],
            active: 'home'
        }
    },

    methods:{
        // 获取轮播图数据
       async getlun(){
            let res = await api.lucn()
            // console.log('res---',res)
            this.lunlist = res.data.message

        },

        // 获取楼层请求
        async getlou(){
            let res = await api.lou()
            console.log('lou--',res)
            this.loulist = res.data.message

        },

        // zhanyi(){
        //     this.$router.push('shou')
        // },
        // quanzi(){
        //     this.$router.push('quanzi')
        // },
        // xunyi(){
        //     this.$router.push('xunyi')
        // },
        // xiaoxi(){
        //     this.$router.push('xiaoxi')
        // },
        // my(){
        //     this.$router.push('my')
        // }
    }

}
</script>

<style lang="less" scoped>
.lun{
    width: 348px;
    height: 156px;
    // background-color: red;
    margin: auto;
}
.lou{
    width: 348px;
    height: 80px;
    // background-color: red;
    display: flex;
        justify-content: space-around;
    margin: auto;
    margin: 20px auto;

}
.loutu{
    width: 59px;
    height: 74px;
    }

    .tupian{
        display: flex;
    }
    .tuzuo{
        width: 170px;
    }
    .tupianyu{
        width: 350px;
        height: 170px;
        margin: auto;
    }

    .tong{
        display: flex;
        justify-content: space-between;
        // background-color: red;
    }

    .bor{
        width: 40px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 8px;
        color: white;
        background-color: red;
        border-radius: 5px 5px 5px 5px;
        }

</style>